<!DOCTYPE html>
<!--
/*******************************************************************************
#      ____               __          __  _      _____ _       _               #
#     / __ \              \ \        / / | |    / ____| |     | |              #
#    | |  | |_ __   ___ _ __ \  /\  / /__| |__ | |  __| | ___ | |__   ___      #
#    | |  | | '_ \ / _ \ '_ \ \/  \/ / _ \ '_ \| | |_ | |/ _ \| '_ \ / _ \     #
#    | |__| | |_) |  __/ | | \  /\  /  __/ |_) | |__| | | (_) | |_) |  __/     #
#     \____/| .__/ \___|_| |_|\/  \/ \___|_.__/ \_____|_|\___/|_.__/ \___|     #
#           | |                                                                #
#           |_|                 _____ _____  _  __                             #
#                              / ____|  __ \| |/ /                             #
#                             | (___ | |  | | ' /                              #
#                              \___ \| |  | |  <                               #
#                              ____) | |__| | . \                              #
#                             |_____/|_____/|_|\_\                             #
#                                                                              #
#                              (c) 2010-2012 by                                #
#           University of Applied Sciences Northwestern Switzerland            #
#                     Institute of Geomatics Engineering                       #
#                           martin.christen@fhnw.ch                            #
********************************************************************************
*     Licensed under MIT License. Read the file LICENSE for more information   *
*******************************************************************************/

                       TUTORIAL 15: Changing Navigation
*******************************************************************************/
-->
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../../compiled/deps.js"></script>
<script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>

<button onclick="globe_nav();">Globe Navigation</button>
<button onclick="fly_nav();">Flight Navigation</button>
<button onclick="constrained_nav();">Constrained Navigation</button>
<button onclick="dynamic_nav();">Dynamic Navigation (in development)</button>
<script>
   var g_ctx;
   //---------------------------------------------------------------------------
   function OnRender(context)
   {
      var scene = ogGetScene(context);

      var currentpos = ogGetPosition(scene);
      text = "longitude: "+currentpos.longitude.toFixed(3)+" latitude: "+currentpos.latitude.toFixed(3)+" elevation: "+currentpos.elevation.toFixed(1);

      ogSetTextColor(context, 0,1,0);
      ogDrawText(context, text, 0, 20);
   }
   //---------------------------------------------------------------------------
   function globe_nav()
   {
      var scene = ogGetScene(g_ctx);

      var options = { "Longitude" : 7.616000,
                      "Latitude"  : 45.12,
                      "Elevation" : 300000
      };
      ogSetNavigationMode(scene, OG_NAVIGATIONMODE_GLOBE, options);
   }
   //---------------------------------------------------------------------------
   function fly_nav()
   {
      var scene = ogGetScene(g_ctx);

      var options = { "Longitude" : 7.616000,
                      "Latitude"  : 45.12,
                      "Elevation" : 2000
      };
      ogSetNavigationMode(scene, OG_NAVIGATIONMODE_FLIGHT, options);
   }
   //---------------------------------------------------------------------------
   function constrained_nav()
   {
      var scene = ogGetScene(g_ctx);
      var options =
      {
            "Longitude"          : 6.5,    // Initial Position: Longitude
            "Latitude"           : 45.5,   // Initial Position: Latitude
            "Elevation"          : 2500,    // Initial Position: Elevation
            "MinElevation"       : 2000,    // Minimum Allowed Elevation (optional)
            "MaxElevation"       : 50000,   // Maximum Allowed Elevation (optional)
            "BoundingRect"       : [[6.0, 45],[7.0, 46]], // 2D Bounding Rect (optional)
            /*"BoundingPolygon"    : [ [7.201538,47.197178],
                                     [8.948364,47.260592],
                                     [7.739868,46.954012],
                                     [8.360596,47.890564]],*/ // 2D Bounding Polygon (instead of BoundingBox, optional)
            "ElevationSteps"     : [2000, 3000, 4000, 5000, 10000, 20000, 50000]   // Sorted List of allowed Elevations (optional)
      }
      ogSetNavigationMode(scene, OG_NAVIGATIONMODE_CONSTRAINED, options);
   }
   //---------------------------------------------------------------------------
   function dynamic_nav()
   {
      var scene = ogGetScene(g_ctx);

      var options = { "Longitude" : 7.616000,
         "Latitude"  : 45.12,
         "Elevation" : 7000000
      };
      ogSetNavigationMode(scene, OG_NAVIGATIONMODE_DYNAMIC, options);
   }
   //---------------------------------------------------------------------------
   function main()
   {
      ogSetArtworkDirectory("http://www.openwebglobe.org/art/");
      g_ctx = ogCreateContextFromCanvas("canvas", true);
      var globe = ogCreateGlobe(g_ctx);

      var imgBlueMarble500 =
      {
         url     : ["http://www.openwebglobe.org/data/img"],
         layer   : "World500",
         service : "i3d"
      };

      var elvSRTM_CH =
      {
         url     : ["http://www.openwebglobe.org/data/elv"],
         layer   : "SRTM",
         service : "i3d"
      };

      ogAddImageLayer(globe, imgBlueMarble500);
      ogAddElevationLayer(globe, elvSRTM_CH);

      ogSetRenderFunction(g_ctx, OnRender);

      ogSetBackgroundColor(g_ctx, 0.2,0.6,0.7,1);

      globe_nav(); // initialize with globe navigation...
   }
   //------------------------------------------------------------------------------
</script>
<body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
<div style="text-align: center">
   <canvas id="canvas"></canvas>
</div>
</body>
</html>